<template>
    <div class="base">
        <div class="box">
            <div class="content">
                <div class="title">
                    <img src="../../assets/img/zhong.png" alt="">
                    <span>关于红中麻将</span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>只可碰牌，不可吃张上牌。</span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>只可自摸。不可放炮胡牌。</span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>只有红中，可以变牌自摸。</span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>参照碰杠麻将规则执行。</span>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <div class="title">
                    <img src="../../assets/img/money.png" alt="">
                    <span>关于奖马</span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>自摸吋，奖马1只。<br />
                        1-5-9-东-中-发-白，中马！
                    </span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>自摸时：<br />
                        若无红中，自动中马。<br />
                        4个红中，当自摸中马</span>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <div class="title">
                    <img src="../../assets/img/vs.png" alt="">
                    <span>关于比赛计分</span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>100／200制</span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>自摸不中马,每人输200分。</span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>自摸还中马,每人输400分</span>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <div class="title">
                    <img src="../../assets/img/zhong.png" alt="">
                    <span>关于开杠</span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>点杠输300分</span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>公杠每人输100分</span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>暗杠每人输200分</span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>抢杠包自摸不奖马。</span>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <div class="title">
                    <img src="../../assets/img/majiang.png" alt="">
                    <span>关于初赛，复赛和决赛</span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>共12局，得分最高者出线。</span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>若得分相同：<br />
                        无论几人都加赛1局，<br />
                        赢者出线。</span>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <div class="title">
                    <img src="../../assets/img/card.png" alt="">
                    <span>关于调位权卡</span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>比赛初始坐位抽签决定。</span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>比赛中，可使用自己的调位卡1次。</span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>可调动同等或低等卡坐位。</span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>不能调动高等卡的坐位。</span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>调位卡优先次序：<br />
                        会员金卡＞红卡＞非会员</span>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="content">
                <div class="title">
                    <img src="../../assets/img/a.png" alt="">
                    <span>计分工具及使用规则</span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>每人1副扑克牌。</span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>每人10000分。</span>
                </div>
                <div class="text">
                    <img src="../../assets/img/tuoyuan.png" alt="">
                    <span>比赛中输掉1万分，自动退出比赛</span>
                </div>
            </div>
        </div>
        <div class="footer">本规则的解释权属组委会</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
        };
    },
    activated() {
    },
    created() {

    },
    mounted() {
    },
    methods: {

    },
};
</script>

<style lang="less" scoped>
.base {
    height: 100%;
    color: #000;

    .box {
        width: 87%;
        margin: 0.5rem auto;
        min-height: 6.25rem;
        background-image: url(../../assets/img/10.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radius: 30px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

        .content {
            padding: 0.5rem 0 0.75rem;

            .title {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 0.75rem;
                font-size: 0.4rem;
                font-weight: 700;
                line-height: 1.2;

                img {
                    height: 0.875rem;
                    margin-right: 0.375rem;
                }
            }

            .text {
                display: flex;
                justify-content: start;
                align-items: start;
                margin: 0.25rem 0;
                padding-left: 1.25rem;
                font-size: 0.375rem;
                line-height: 1.6;

                img {
                    width: 0.25rem;
                    margin-right: 0.5rem;
                    margin-top: 0.2rem;
                }
            }
        }
    }

    .footer {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1.125rem 0;
        color: #868689;
        font-size: 0.4rem;
        font-weight: 700;
        line-height: 1.2;
    }
}
</style>